<template>
  <el-pagination
    background
    small
    class="common_pagination"
    :layout="layout"
    :current-page="currentNum"
    :page-size="currentSize"
    :total="total"
    :page-sizes="pageSizes"
    @size-change="handlePageSizeChange"
    @current-change="handlePageNumChange"
  />
</template>

<script setup>
const props = defineProps({
  pageNum: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 20,
  },
  total: {
    type: Number,
    default: 0,
  },
  pageSizes: {
    type: Array,
    default: () => {
      return [20, 50, 100, 200];
    },
  },
  layout: {
    type: String,
    default: 'total, prev, pager, next, sizes',
  },
});

const currentNum = ref(props.pageNum);
const currentSize = ref(props.pageSize);

const emits = defineEmits(['handlePageChange']);

function handlePageSizeChange(val) {
  currentSize.value = val;
  currentNum.value = 1;
  emits('handlePageChange', { pageSize: val, pageNum: 1 });
}
function handlePageNumChange(val) {
  currentNum.value = val;
  emits('handlePageChange', { pageSize: currentSize.value, pageNum: val });
}

defineExpose({
  currentNum,
  currentSize,
});
</script>

<style lang="scss" scoped>
.common_pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
